<template>
  <view class="detail">
    <view class="detail-card">
      <view class="detail-banner">
        <image :src="detailData?.poster" mode="widthFix" />
      </view>
      <view class="info">
        <view class="info-1">
          <view class="title">
            <text>{{ detailData?.name }}</text>
          </view>
          <view class="section">
            <text class="section-title">主办单位:</text>
            <text class="item-fix">{{ detailData?.company }}</text>
          </view>
          <view class="section">
            <text class="section-title">参加单位:</text>
            <text class="item-fix">{{ detailData?.company }}</text>
          </view>
          <view class="section">
            <text class="section-title">活动时间:</text>
            <text class="item">
              {{ formatDate(detailData?.start_time) }} 至 {{ formatDate(detailData?.end_time) }}
            </text>
          </view>
          <view class="section">
            <text class="section-title">参加规模:</text>
            <text class="item">{{ detailData?.Participating_units }}人</text>
          </view>
          <view class="section">
            <text class="section-title">活动地址:</text>
            <text class="item">{{ detailData?.place }}</text>
          </view>
        </view>
        <view class="section-rule">
          <view class="title">
            <text>活动详情及规则</text>
          </view>
        </view>
        <view class="button-section">
          <button
            :class="['register-button', { registered: isRegistered }]"
            @click="registerForActivity"
          >
            {{ isRegistered ? '已报名' : '报名参加' }}
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getSignupDetailAPI, postSignupAPI } from '@/services/index/home'
import { onLoad } from '@dcloudio/uni-app'
import type { DetailItem } from '@/types/index/home'

const detailData = ref<DetailItem | null>(null)
const activityId = ref<string | null>(null)
const isRegistered = ref<boolean>(false) // 新增的状态变量

const getDetailItemData = async (activityId: string) => {
  try {
    const { data } = await getSignupDetailAPI(activityId)
    detailData.value = data.result
  } catch (error) {
    console.error('Error fetching details:', error)
  }
}

const registerForActivity = async () => {
  const userInfo = uni.getStorageSync('userInfo')

  if (!userInfo) {
    // 用户未登录，跳转到登录页
    uni.showToast({
      title: '请先登录',
      icon: 'none',
    })
    uni.navigateTo({
      url: '/pages/login/login',
    })
    return
  }

  if (!detailData.value) {
    return
  }

  const u_id = userInfo.id
  const a_id = detailData.value.id

  try {
    const response = await postSignupAPI(u_id, a_id)

    if (response.code === 200) {
      // 改变按钮状态
      isRegistered.value = true
      uni.showToast({
        title: '报名成功',
        icon: 'success',
      })
    } else {
      uni.showToast({
        title: '报名失败',
        icon: 'none',
      })
    }
  } catch (error) {
    uni.showToast({
      title: '网络错误',
      icon: 'none',
    })
  }
}

onLoad((props) => {
  activityId.value = props?.id || 'defaultId'
  if (activityId.value) {
    getDetailItemData(activityId.value)
  }
})

// 格式化日期
const formatDate = (dateString?: string) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    const seconds = String(date.getSeconds()).padStart(2, '0')
  return `${year}年${month}月${day}日 ${hours}时${minutes}分${seconds}秒`
}

onMounted(() => {
  if (!detailData.value && activityId.value) {
    getDetailItemData(activityId.value)
  }
})
</script>

<style scoped>
.detail {
  background: #f9f9ff;
}

.info-1 {
  margin-top: 1rem;
  padding: 0.35rem;
  background-color: white;
  border-radius: 1%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.title text {
  font-size: 36rpx;
  font-weight: bold;
}

.section {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.section-title {
  font-size: 1rem;
  font-weight: bold;
  margin-right: 0.5rem;
}

.item {
  flex-grow: 1;
}

.section-rule {
  margin-top: 1rem;
  padding: 0.5rem;
  background-color: white;
  border-radius: 1%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.item-rule {
  margin-bottom: 0.5rem;
}

.button-section {
  text-align: center;
  margin-top: 2rem;
}

.register-button {
  background: #ec7496;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.register-button:hover {
  background-color: #ec7496;
}

.register-button.registered {
  background-color: gray; /* Change background color when registered */
}
</style>
